<!-- 
 生产报告
  -->
<template>
  <containerLayout class="production-report">
    <div class="navigation">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="Summary" name="Summary"></el-tab-pane>
        <el-tab-pane label="TO and Payment Schedule" name="TOAndPaymentSchedule"></el-tab-pane>
        <el-tab-pane label="Outsource Detail" name="OutsourceDetail"></el-tab-pane>
        <el-tab-pane label="Overtime Cost" name="OvertimeCost"></el-tab-pane>
        <el-tab-pane label="Show Crew Plan" name="ShowCrewPlan"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="table-container" ref="tableContainer">
      <el-scrollbar class="scrollbar" :height="scrollbarHeight">
        <component :is="currentComponent" v-bind="{ tableHeight: scrollbarHeight }" />
      </el-scrollbar>
    </div>
  </containerLayout>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import ContainerLayout from '../layout/ContainerLayout.vue'
import TOAndPaymentSchedule from '../components/ProductionReport/TOAndPaymentSchedule.vue'
import OutsourceDetail from '../components/ProductionReport/OutsourceDetail.vue'
import OvertimeCost from '../components/ProductionReport/OvertimeCost.vue'
import Summary from '../components/ProductionReport/Summary.vue'
import ShowCrewPlan from '../components/ProductionReport/ShowCrewPlan.vue'
const componentsMap = {
  Summary,
  TOAndPaymentSchedule,
  OutsourceDetail,
  OvertimeCost,
  ShowCrewPlan,
}

const router = useRouter()
const route = useRoute()
const activeName = ref<string | any>('Summary')
const scrollbarHeight = ref(800)
const tableContainer = ref<HTMLElement | null>(null)

onMounted(() => {
  activeName.value = route.params.id || 'Summary'
  // if (route
  if (tableContainer.value) {
    scrollbarHeight.value = tableContainer.value.offsetHeight // 计算并设置高度
  }
})

const currentComponent = computed(() => componentsMap[activeName.value as keyof typeof componentsMap])
/**
 * 处理点击事件
 *
 * @param tab TabsPaneContext类型，表示选项卡面板的上下文
 */
const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.paneName?.toString() || 'Summary'
  router.push({ name: 'ProductionReport', params: { id: tab.paneName } })
}
</script>
<style scoped lang="scss">
.production-report {
  display: flex;
  flex-direction: column;
  .navigation {
  }
  .table-container {
    flex: 1;
    overflow: auto;
    .scrollbar {
      padding-right: 10px;
    }
  }
}
</style>
